<template>
    <div class="table">
        <!-- title -->
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="icon iconfont icon-jifen"></i>订单列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 表格主体 -->
        <div class="container">
            <div class="handle-tab">
                <el-tabs v-model="state" @tab-click="changState">
                    <el-tab-pane label="待付款" name="0"></el-tab-pane>
                    <el-tab-pane label="待发货" name="1"></el-tab-pane>
                    <el-tab-pane label="已发货" name="2"></el-tab-pane>
                    <el-tab-pane label="交易完成" name="3"></el-tab-pane>
                    <el-tab-pane label="交易关闭" name="6"></el-tab-pane>
                </el-tabs>
            </div>
            <!-- title -->
            <div class="handle-box">
                <div class="handle-box-1">
                    收货人昵称：
                    <el-input type="nickName" v-model="nickName" placeholder="请输入收货人昵称"
                              style="width:145px;margin-right:15px;">
                    </el-input>
                    订单编号：
                    <el-input v-model="orderCode" placeholder="请输入订单编号" class="handle-input"></el-input>
                    下单日期：
                    <el-date-picker value-format="yyyy-MM-dd" v-model="startDate" type="date" class="handle-date"
                                    placeholder="选择日期"></el-date-picker>
                    终止日期：
                    <el-date-picker value-format="yyyy-MM-dd" v-model="endDate" type="date" class="handle-date"
                                    placeholder="选择日期"></el-date-picker>
                    <el-button type="primary" icon="search" @click="search">查询</el-button>
                </div>
            </div>
            <!-- 表格主体 -->
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="order_code" label="订单编号" width="200" align="center"></el-table-column>
                <!-- <el-table-column prop="order_code" label="订单来源" width="120" align="center"></el-table-column> -->
                <el-table-column prop="goods_list[0].name" label="产品名称"  align="center"></el-table-column>
                <el-table-column prop="total_money" label="订单金额" width="140" align="center"></el-table-column>
                <el-table-column prop="nick_name" label="下单人昵称" width="180" align="center"></el-table-column>
                <el-table-column type="expand" label="查看收货信息" width="120" align="center">
                    <template slot-scope="props">
                        <div class="bs-callout bs-callout-danger">
                            收货信息<span style="padding-left:30px;"></span>姓名：{{props.row.shoujian_name}}
                            <span style="padding-left:30px;"></span>手机号码: {{props.row.shoujian_mobile}}
                            <span style="padding-left:30px;"></span>收货地址：{{props.row.province}}{{props.row.city}}{{props.row.address}}
                            <div style=""></div>
                            <div style="padding:0px 0px 0px 0px">
                                <div v-for="item in props.row.goods_list"  :key="item.id" style="padding:20px 0px 0px 0px" >
                                    <div style="display:inline-block;padding-right:30px;height:100px;line-height:100px;">
                                        商品图片：<img :src="item.head_img" style="width:160px;height:auto;display:inline-block;vertical-align: middle;"/>
                                    </div>
                                    <div style="display:inline-block;padding-right:30px;">商品名称：{{item.name}}</div>
                                    <div style="display:inline-block;padding-right:30px;height:100px;">商品规格：{{item.spec}}</div>
                                    <div style="display:inline-block;padding-right:30px;">商品价格：{{item.single_price}}</div>
                                    <div style="display:inline-block;padding-right:30px;">购买数量：{{item.nums}}</div>
                                    <div style="display:inline-block;padding-right:30px;">总计：{{item.nums| amount(item.single_price)}}</div>
                                </div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="create_time" label="下单时间" width="180" align="center"></el-table-column>
                <el-table-column label="操作" align="center" width="160">
                    <template slot-scope="scope">
                        <el-button size="small" type="text" @click="handleLook(scope.$index, scope.row)">查看详情
                        </el-button>
                        <el-button class="edit" size="small" type="text" v-show="scope.row.state == 1" @click="handleEdit(scope.$index, scope.row)">
                            填写物流信息
                        </el-button>
                        <el-button class="del" size="small" type="text " v-show="scope.row.state == 6" @click="handleDelete(scope.$index, scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页按钮 -->
            <div class="pagination" v-show="totalPages>10">
                <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :total="totalPages">
                </el-pagination>
            </div>
            <!-- 删除提示框 -->
            <el-dialog title="提示" :visible.sync="delVisible" width="400px" center>
                <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="delVisible = false">取 消</el-button>
                    <el-button type="primary" @click="deleteRow">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
    export default {
        name: "order",
        data() {
            return {
                pageIndex: 1,//当前页码
                pageSize: 10,//每页12条
                totalPages: 1,//默认的总条数
                tableData: [],//表格数据
                delVisible: false, //删除确认提示，默认隐藏
                nickName: '',//订单名称
                orderCode: '',//订单编号
                state: 0,
                startDate: '',
                endDate: '',//开始日期
                value: ''
            }
        },
        mounted() {
            this.getOrderData();
        },
        filters:{
            amount:function(value1,value2){
                // console.log(value1+"===="+value2);
                return value1*value2;
            }
        },
        watch: {
            state(){
                this.getOrderData()
            }
        },
        methods: {
            
            //获取data数据
            getOrderData() {
                const querystring = require('querystring');
                const param = {
                    nickName: this.nickName,
                    orderCode: this.orderCode,
                    state: this.state,
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize,
                    startDate: this.startDate,
                    endDate: this.endDate,
                }
                // console.log(param);
                this.$axios
                    .post('/manage/order/list', querystring.stringify(param))
                    .then(response => {
                        //console.log(response);
                        if (response.data.code == 200) {
                            this.totalPages = response.data.data.totalPages;
                            let data = response.data.data.currData;
                            let obj = data;
                            this.tableData = obj;//赋值 table 列表数据
                        } else {
                            console.log(response.data.msg)
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            changState(tab) {
                this.state = tab.name
            },
            //查看订单详情
            handleLook(index, row) {

                if (row.id && row.id > 0) {
                    this.$router.push({path: "/order/detail/" + row.id});
                } else {
                    this.$message.error('获取ID失败:' + id);
                }
            },
            //编辑订单详情
            handleEdit(index, row) {
                if (row.id && row.id > 0) {
                    this.$router.push({path: "/order/sendgoods/" + row.id});
                } else {
                    this.$message.error('获取ID失败:' + id);
                }
            },
            //删除订单
            handleDelete(index, row) {
                if (row.id && row.id > 0) {
                    this.delVisible = true;
                    this.delIndex = index;//当前要删除的下标
                    this.delId = row.id;// 当前选中ID
                }
            },
            //执行删除
            deleteRow() {
                //console.log("触发了确定");
                if (this.delId > 0) {
                    const querystring = require('querystring');
                    const param = {
                        id: this.delId
                    }
                    this.$axios.post('/manage/order/delete', querystring.stringify(param)).then(response => {
                        //console.log(response);
                        if (response.data.code == 200) {
                            this.tableData.splice(this.delIndex, 1);
                            this.$message.success('删除成功');
                            this.delVisible = false;
                        } else {
                            this.$notify.error({
                                title: '删除失败',
                                duration: 2000,
                                message: '失败原因：' + response.data.msg
                            });
                            this.delVisible = false;
                        }

                    }).catch(error => {
                        console.log(error);
                    });
                }
            },
            // 分页导航
            handleCurrentChange(val) {
                this.pageIndex = val
                this.getOrderData()
                // this.cur_page = val;
                //     this.getData();
            },
            //查询
            search() {
                this.getOrderData();
            },
        }
    }
</script>
<style lang="stylus" scoped>
    .handle-box {
        margin-bottom: 20px;

    .handle-box-1 {
        margin-bottom: 15px;

    .handle-input {
        width: 250px;
        display: inline-block;
        margin-right: 30px;
    }

    .handle-date {
        margin-right: 30px;
        
    }

    }
    .handle-box-2 {

    .handle-select {
        width: 135px;
        margin-right: 30px;
    }

    }

    }
    .edit {
        color #ff9800;
    }

    .del {
        color #e51c23;
    }

.bs-callout {
    padding: 20px;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
}
    .bs-callout-danger {
    border-left-color: #ce4844;
}
</style>
